<template>
  <div class="hot">
    <div class="wrapper">
      <div class="title">
        <div class="left">
          <h3>宋代配饰</h3>
          <p>配饰精致 文化象征</p>
        </div>
        <div class="button">
          <a href="#" @click="prevSlide"><i class="iconfont icon-arrow-left-bold"></i></a>
          <a href="#" @click="nextSlide"><i class="iconfont icon-arrow-right-bold"></i></a>
        </div>
      </div>
      <div class="bd">
        <ul class="slides">
          <li v-for="(item, index) in items" :key="index" class="slide-item">
            <a href="#">
              <img :src="item.image" :alt="item.title" class="item-image"/>
            </a>
            <div class="txt" style="margin-top: 15px;">
              <h4 class="item-title">{{ item.title }}</h4>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSlide: 0,
      items: [
        {
          title: '宋朝珍珠钗',
          image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.b3aMaLI5ezYPD2esz9kTYgHaHa?w=182&h=182&c=7&r=0&o=5&dpr=2&pid=1.7'
        },
        {
          title: '宋朝饰品花纹',
          image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.QcTVnmfFACcrGIMAN5zfGgAAAA?w=274&h=182&c=7&r=0&o=5&dpr=2&pid=1.7'
        },
        {
          title: '宋朝金银耳环',
          image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.ao_mbHndfnJIjpjnRo3_OAHaEQ?w=237&h=180&c=7&r=0&o=5&dpr=2&pid=1.7'
        },
        {
          title: '宋代金帽冠',
          image: 'https://img1.artron.net/auction/2013/art504036/d/art5040360230.jpg'
        },
        {
          title: '宋朝簪子',
          image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.hlGY0R-xQspI2NVHkCv7ZwHaHa?w=180&h=180&c=7&r=0&o=5&dpr=2&pid=1.7'
        }
      ]
    };
  },
  methods: {
    prevSlide() {
      if (this.currentSlide > 0) {
        this.currentSlide--;
      } else {
        this.currentSlide = this.items.length - 1;
      }
    },
    nextSlide() {
      if (this.currentSlide < this.items.length - 1) {
        this.currentSlide++;
      } else {
        this.currentSlide = 0;
      }
    }
  }
}
</script>

<style scoped>
.hot {
  margin-top: 60px;
  padding-bottom: 100px;
  overflow: hidden;
  background-color: #f5f5f5;
}

.hot .title {
  position: relative;
  margin-bottom: 40px;
  text-align: center;
}

.hot .button {
  display: flex;
  position: absolute;
  right: 0;
  top: 47px;
  z-index: 10;
}

.hot .button a {
  display: block;
  width: 30px;
  height: 30px;
  background-color: #ddd;
  text-align: center;
  line-height: 30px;
  color: #fff;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.hot .button a:hover {
  background-color: #00be9a;
}

.hot .bd {
  display: flex;
  overflow: hidden;
  position: relative;
}

.hot .bd .slides {
  display: flex;
  transition: transform 0.5s ease;
}

.hot .bd .slide-item {
  width: 232px;
  height: 306px;
  margin-right: 20px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hot .bd .slide-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.hot .bd .item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 保证图片大小一致并覆盖容器 */
}

/* .hot .bd .item-title {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  color: #333;
  margin-top: 10px;
} */
.hot .bd .item-title {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  color: #333;  /* 确保字体颜色有设置 */
  /* margin-top: 10px; */
}

/* .hot .bd .txt {
  /* padding: 0 10px; */
/* }  */
.hot .bd .item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 确保图片填充且不变形 */
}

.hot .bd .txt {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 垂直居中 */
  align-items: center;      /* 水平居中 */
  /* padding: 0 10px; */
}

css
.hot .bd .slide-item {
  width: 232px;
  height: auto;
  margin-right: 20px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  display: flex;
  flex-direction: column; /* 使图片和文字上下排列 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hot .bd .item-image {
  width: 100%;
  height: 80%;  /* 限制图片占用部分空间 */
  object-fit: cover;
}

.txt{
  margin-top: 0 !important;
}

.hot .bd .txt {
  padding: 10px;
  height: 20%;  /* 文字区域占用剩余空间 */
}

</style>